import React, { FC, useState } from 'react'
import { Input, Form } from 'antd-mobile'
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'

import styles from './PassInput.less'
import { reg } from '../utils/validate'

const PassInput: FC<any> = ({
  label,
  name,
  placeholder,
  help,
  rules,
  dependencies
}) => {
  const [visible, setVisible] = useState(false)

  return (
    <Form.Item
      label={label}
      name={name}
      help={help}
      dependencies={dependencies}
      rules={[
        { required: true, message: '手机号不能为空' },
        { pattern: reg.pwd, message: '密码格式不正确' },
        ...rules
      ]}
      extra={
        <div className={styles.eye}>
          {!visible ? (
            <EyeInvisibleOutline onClick={() => setVisible(true)} />
          ) : (
            <EyeOutline onClick={() => setVisible(false)} />
          )}
        </div>
      }
    >

      <Input
        placeholder='请输入密码'
        type={visible ? 'text' : 'password'}
      />
    </Form.Item>
  )
}

PassInput.defaultProps = {
  label: '密码',
  name: 'password',
  placeholder: '请输入密码',
  help: '密码由6-12位数字和字母组成',
  rules: []
}

export default PassInput
